<template>
  <div class="milestone-container">
    <h2>里程碑事件</h2>
    <div class="timeline">
        <ul>
          <li>
            <div class="bullet pink"></div>
            <div class="time">2024-09-02</div>
            <div class="desc">
              <span class="title">今天订婚啦</span>
              <br/>
              <span class="sub-title">终于订婚咯终于订婚咯终于订婚咯终于订婚咯</span>
            </div>
          </li>
          <li>
            <div class="bullet green"></div>
            <span class="time">2024-09-02</span>
            <div class="desc">
              <span class="title">Title</span>
              <br/>
              <span class="sub-title">终于订婚咯终于订婚咯终于订婚咯</span>
            </div>
          </li>
          <li>
            <div class="bullet orange"></div>
            <span class="time">2024-09-02</span>
            <div class="desc">
              <span class="title">Title</span>
              <br/>
              <span class="sub-title">SubTitle</span>
            </div>
          </li>
          <li>
            <div class="bullet green"></div>
            <span class="time">2024-09-02</span>
            <div class="desc">
              <span class="title">Title</span>
              <br/>
              <span class="sub-title">SubTitle</span>
            </div>
          </li>
          <li>
            <div class="bullet orange"></div>
            <span class="time">2024-09-02</span>
            <div class="desc">
              <span class="title">Title</span>
              <br/>
              <span class="sub-title">SubTitle</span>
            </div>
          </li>
          <li>
            <div class="bullet green"></div>
            <span class="time">2024-09-02</span>
            <div class="desc">
              <span class="title">Title</span>
              <br/>
              <span class="sub-title">SubTitle</span>
            </div>
          </li>
          <li>
            <div class="bullet orange"></div>
            <span class="time">2024-09-02</span>
            <div class="desc">
              <span class="title">Title</span>
              <br/>
              <span class="sub-title">SubTitle</span>
            </div>
          </li>
          <li>
            <div class="bullet green"></div>
            <span class="time">2024-09-02</span>
            <div class="desc">
              <span class="title">Title</span>
              <br/>
              <span class="sub-title">SubTitle</span>
            </div>
          </li>
        </ul>
      </div>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.milestone-container {
  padding: 1vh 0.5vw;
  border: solid 2px sandybrown;
  border-radius: 0.5vw;
  overflow: auto;

  h2 {
    margin: 1vh 0;
    text-align: center;
  }

  .timeline {
    ul {
      list-style: none;
      position: relative;

      display: flex;
      flex-direction: column;
      gap: 2vh;

      &::before {
        content: '';
        height: 100%;
        width: 0.2vw;
        background-color: lightgray;
        position: absolute;
        left: 2.45vw;
      }

      li {
        margin: 1vh 0;
        display: flex;
        align-items: center;
        gap: 0.5vw;
      }
    }

    .bullet {
      width: 0.5vw;
      height: 0.5vw;
      border-radius: 50%;
      background: white;
      z-index: 1;
    }

    .bullet:nth-child(2n) {
      border: 4px solid orange;
    }

    .bullet:nth-child(2n+1) {
      border: 4px solid green;
    }

    .time {
      width: 30%;
      font-size: 0.8vw;
    }

    .desc {
      width: 60%;
      .title {
        font-size: 1vw;
        font-family: '华为行楷',serif;
      }

      .sub-title {
        color: gray;
      }
    }

    span {
      font-size: 0.8vw;
    }
  }
}
</style>
